<template>
    <div id="head-box">
      <div id="logo"></div>
      <div id="title">智慧石交通</div>
      <Heatmap ></Heatmap>
      <statistics></statistics>
      <addNoticeVue></addNoticeVue>
      
      <DrawToolVue></DrawToolVue>
      <toolbox></toolbox>

      <searching></searching>
      <id></id>
    </div>
  </template>
  
  <script setup>
  //import roadButton from '../components/roadButton.vue';
  import Heatmap from '../components/Heatmap.vue';
  import searching from '../components/searching.vue';
  import statistics from '../components/statistics.vue';
  //import reportButton from '../components/reportButton.vue'
  import toolbox from '../components/toolbox.vue'
  //import noticeButton from '../components/noticeButton.vue'
  import addNoticeVue from '../components/addNotice.vue';
  import DrawToolVue from '../components/DrawTool.vue';
  import id from '../components/id.vue'
  </script>
  <style scoped>
  #head-box {
    width: 100vw;
    height: 4.5vw;
    display: flex;
    position: absolute;
  
    float: inline-start;
    background-color: rgb(245, 245, 245);
    opacity: 0.95;
    box-shadow: 0px 5px 5px grey;
    top: 0px;
  }
  
  #logo {
    background: url('../assets/logo.png') no-repeat center center;
    width: 100px;
    height: 100%;
    background-size: cover;
    margin-left: 100px;
  }
  
  #title {
    line-height: 80px;
    display: flex;
    font-size: 40px;
    font-family: "华文楷体";
    /*设置字体*/
    font-weight: 400;
    text-align: center;
    /*设置文字居中*/
    margin-left: 20px;
    letter-spacing:10px;
    /*设置外边距*/
    padding: 5px;
    /*设置内边距*/
  }</style>